<template>
  <v-dialog v-model="show" width="400" persistent>
    <v-card>
      <v-card-title> 登录 </v-card-title>

      <v-divider></v-divider>

      <v-card-text style="padding: 24px;">

        <v-text-field
            v-model="name"
            label="用户名"
            placeholder="请输入用户名"
            color="#0c422e"
            outlined
            hide-details
            dense
        ></v-text-field>

        <v-text-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            color="#0c422e"
            outlined
            hide-details
            dense
            style="margin-top: 16px;"
        ></v-text-field>

      </v-card-text>

      <v-divider></v-divider>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#0c422e" text @click="onCancel"> 取消 </v-btn>
        <v-btn color="#0c422e" text @click="onConfirm"> 确认 </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from "vue-property-decorator";

@Component({
  name: "LoginDialog"
})
export default class LoginDialog extends Vue {
  @PropSync("showLoginDialog", { type: Boolean, default: false }) show!: boolean;
  name: string = "";
  password: string = "";

  onConfirm() {
    this.$store.dispatch("login", { name: this.name, password: this.password }).then(() => {
      this.onCancel();
    }).catch(() => {});
  }

  onCancel() {
    this.show = false;
    this.name = "";
    this.password = "";
  }

};
</script>

<style scoped>

</style>
